<template>
  <div class="tips">
    <!-- <div class="topsss">
      <el-form>
        <el-form-item
          label="摄像头实时画面:"
          prop="equipmentVideoUrl"
          style="width: 70%"
        >
          <video
            style="height: 100%; width: 100%"
            v-bind:src="video"
            class="avatar video-avatar"
            controls="controls"
          ></video>
        </el-form-item>
      </el-form>
    </div> -->
    <div class="videoBox">
      <img id="poster" src="http://120.77.35.150/video/video-bg.png" alt="" />
      <video
        id="video"
        preload="auto"
        playsinline="true"
        x-webkit-airplay="true"
        webkit-playsinline="true"
        x5-video-player-type="h5"
        x-video-orientation="h5"
        x5-video-player-fullscreen="true"
        muted="false"
        src="http://120.77.35.150/video/2.mp4"
      ></video>
      <canvas id="canvas"></canvas>
      <div id="btn">点击</div>
    </div>
    <!-- 选择运动 -->
    <div class="tslect">
      <div class="topselect">
        <el-select v-model="papplication" placeholder="选择运动">
          <el-option
            v-for="(item, index) in equipmentTypeList"
            :key="index"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button size="small" style="margin-left: 2rem">重置</el-button>
        <el-button size="small">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { postSchoolKongst } from "@/api/device";
const video = document.getElementById("video");
const palyBtn = document.getElementById("btn");
const canvas = document.getElementById("canvas");
const poster = document.getElementById("poster");
// 初始化(创建)canvas
const ctx = canvas.getContext("2d");
// 获取可视宽高
const screen_W = window.innerWidth || document.body.clientWidth;
const screen_H = window.innerHeight || document.body.clientHeight;
// 设置画布宽高（画布宽高，最好是根据设计视频所做实际宽高）
canvas.width = screen_W * 3; // 获取屏幕宽度作为canvas的宽度 这个设置的越大，画面越清晰（相当于绘制的图像大，然后被css缩小）
canvas.height = screen_H * 3 + 12;
// 绘制视频
palyBtn.addEventListener("touchstart", function (e) {
  e.preventDefault();
  poster.style.display = "none";
  // 绘制背景
  ctx.fillStyle = "#000";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
  if (video.paused) {
    video.play();
  } else {
    video.pause();
  }
});
video.addEventListener("play", playCallBack);
function playCallBack() {
  if (video.paused) {
    return;
  }
  captureFrame();
  setTimeout(playCallBack, 40);
}
function captureFrame() {
  ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
}

export default {
  data() {
    return {
      form: {},
      videoFlag: false,
      //是否显示进度条
      videoUploadPercent: "",
      //进度条的进度，
      isShowUploadVideo: false,
      options: [],
      value: "",
      video: "",
    };
  },
  created() {
    this.getSchoolChangsuo();
    console.log(this.$route.query.rtsp);
    this.video = this.$route.a;
  },
  methods: {
    getSchoolChangsuo() {
      postSchoolKongst({}).then((res) => {
        console.log(res, "");
        if (res.code == 200) {
          this.options = res.result;
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
* {
margin: 0;
padding: 0;
}
body {
overflow: hidden;
}
.videoBox {
width: 100%;
height: 100%;
position: relative;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
img {
position: absolute;
display: block;
width: 100%;
height: 100%;
}
#btn {
position: absolute;
width: 50px;
height: 50px;
background-color: #ccc;
border-radius: 50%;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
text-align: center;
}
canvas {
width: 100%;
height: 100%;
}
video {
position: absolute;
display: none;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}

::v-deep .el-form-item__content {
  width: 500px;
  border-radius: 3px;
}
.tips {
  height: 100%;
  .tiops {
    display: flex;
    justify-content: space-around;
    color: #333333;
  }
  .topsss {
    display: flex;
    justify-content: space-around;
    .tosg {
      margin-top: 1rem;
      width: 40%;
      height: 17rem;
      background-color: red;
      border-radius: 3px;
    }
  }
  .tslect {
    margin-top: 2rem;
    display: flex;
    justify-content: space-around;

    .topselect {
    }
  }
}
</style>